<template>
	<view class="content" v-if="post != null">
		<view class="post_content app_content_color" v-if="post != null">
			<view class="user_info_content">
				<image class="user_avatar app_background_color" :src="post.icon" @tap="avatarTap"></image>
				<view class="user_info_username_content app_title_color">
					<view>{{post.user_nick_name}}</view>
					<view class="cell_info_user_title_content">
						<view class="cell_info_user_title app_background_color app_title_color">
							<view>{{post.userTitle}}</view>
						</view>
						<view class="cell_info_blank"></view>
					</view>
				</view>

			</view>
			<view class="row-content">
				<view class="post_title_text app_title_color">{{post.title}}</view>
				<image class="jinghua_img" mode="widthFix" src="../../static/jinghua.png" v-if="post.essence"></image>
			</view>
			<block v-for="(content,index) in post.content">
				<view class="post_content_text app_title_color" v-if="content.type == 0" selectable v-html="content.infor"></view>
				<view class="post_reply_cell_content_link" v-if="content.type == 4" selectable @tap.stop="linkTap(content.url)">{{content.infor}}</view>
				<image class="post_content_image" v-if="content.type == 1" mode="widthFix" :src="content.infor"
					:data-item="content" @click.stop="imageTap"></image>
			</block>
			<view class="poll_info_content app_background_color" v-if="post.poll_info">
				<block v-if="post.poll_info.poll_status == 2">
					<view class="poll_info_title app_title_color">投票内容</view>
					<block v-for="(poll,pollIndex) in post.poll_info.poll_item_list">
						<view class="poll_info_cell" @tap="selectPollTap(poll)">
							<checkbox class="poll_info_cell_check"
								:checked="selectPoll.poll_item_id == poll.poll_item_id"></checkbox>
							<text class="poll_info_cell_desc app_title_color">{{poll.name}}</text>
						</view>
					</block>
					<view class="join_poll_button_content" @tap="joinPollTap">
						<view>参与投票</view>
					</view>
				</block>
				<block v-else>
					<view class="poll_info_title app_title_color">投票结果</view>
					<block v-for="(poll,pollIndex) in post.poll_info.poll_item_list">
						<text class="poll_info_cell_title app_title_color">{{poll.name}} {{poll.percent}}</text>
						<view class="poll_info_cell_content app_content_color">
							<view class="poll_info_cell_percent" :style="{width: poll.percent_css}"></view>
						</view>
					</block>
				</block>

				<view class="poll_info_subtitle app_subtitle_color">参与人数：{{post.poll_info.voters}}人</view>
			</view>
			<view class="zan_list_content grid-content" v-if="post.zanList.length > 0">
					<image class="zan_avatar" src="../../static/zan_list_icon.png"></image>
					<image class="zan_avatar" mode="aspectFill" v-for="(item,index) in post.zanList"
						:src="'http://bbs.uestc.edu.cn/uc_server/avatar.php?uid='+item.recommenduid+'&size=middle'">
					</image>
				</view>
			<view class="row-content">
				<view class="post_content_time app_subtitle_color">{{post.showTime}}</view>
				<view class="post_content_time app_subtitle_color" v-if="post.mobileSign.length > 0">【{{post.mobileSign}}】</view>
			</view>
			
		</view>
		<empty-view v-if="items.length == 0" />
		<view class="post_reply_cell_content app_content_color" v-for="(item,index) in items"  @tap="replyCellTap(item)">
			<view class="user_info_content">
				<image class="user_avatar app_background_color" :src="item.icon" :data-item="item" @tap="replyAvatarTap"></image>
				<view class="user_info_username_content app_title_color">
					<view>{{item.reply_name}}</view>
					<view class="cell_info_user_title_content">
						<view class="cell_info_user_title app_background_color app_title_color">
							<view>{{item.userTitle}}</view>
						</view>
						<view class="cell_info_blank"></view>
					</view>
				</view>
			</view>
			<view class="post_reply_cell_info_quote_content app_background_color app_subtitle_color" v-if="item.quote_content">{{item.quote_content}}</view>
			<block v-for="(content,i) in item.reply_content">
				<view class="post_reply_cell_content_text app_title_color" v-if="content.type == 0" selectable v-html="content.infor">
				</view>
				<view class="post_reply_cell_content_link" v-if="content.type == 4" @tap.stop="linkTap(content.url)">{{content.infor}}</view>
				<image class="post_content_image" v-if="content.type == 1" mode="widthFix" :src="content.infor"
					:data-item="content" @click.stop="imageTap"></image>
			</block>
			<view class="row-content">
				<view class="post_content_time app_subtitle_color">{{item.showTime}}</view>
				<view class="post_content_time app_subtitle_color" v-if="item.mobileSign.length > 0">【{{item.mobileSign}}】</view>
			</view>

		</view>
		<view style="margin-bottom: 100px;"></view>
		<view class="reply_super_content app_content_color">
			<view class="reply_content app_background_color" @tap="replyTap">点击回复</view>
			<view class="favorite_button_content" v-if="post.is_favor" @tap="favoriteButtonTap">
				<view>取消收藏</view>
			</view>
			<view class="unfavorite_button_content" v-else @tap="favoriteButtonTap">
				<view>收藏帖子</view>
			</view>
			<view class="more_button_content app_background_color" @tap="moreTap">
				<image class="more_button_icon" src="../../static/more_icon.png"></image>
			</view>
		</view>

	</view>
</template>

<style lang="scss">
	.content {
		display: flex;
		width: 100%;
		flex-direction: column;
		padding-bottom: 100upx;
	}

	.post_content {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.user_info_content {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.user_avatar {
		width: 100upx;
		height: 100upx;
		margin-left: 30upx;
		margin-top: 30upx;
		border-radius: 50upx;
	}

	.user_info_username_content {
		display: flex;
		font-size: 30upx;
		flex-direction: column;
		margin-left: 20upx;
		margin-top: 20upx;
		flex-grow: 1;
	}

	.cell_info_user_title_content {
		display: flex;
		flex-direction: row;
	}

	.cell_info_blank {
		flex-grow: 1;
	}

	.cell_info_user_title {
		display: flex;
		border-radius: 4upx;
		height: 30upx;
		padding-left: 10upx;
		padding-right: 10upx;
		align-items: center;
		justify-content: center;
		font-size: 20upx;
		margin-top: 20upx;
	}

	.post_title_text {
		font-size: 36upx;
		margin-left: 30upx;
		margin-right: 30upx;
		max-width: 690upx;
		margin-top: 30upx;
	}

	.post_content_text {
		font-size: 30upx;
		margin-left: 30upx;
		margin-right: 30upx;
		max-width: 690upx;
		margin-top: 20upx;
		word-wrap: break-word;
	}

	.post_content_image {
		margin-left: 30upx;
		margin-right: 30upx;
		width: 690upx;
		margin-top: 20upx;
	}

	.post_content_time {
		font-size: 20upx;
		margin-left: 30upx;
		margin-top: 40upx;
		margin-bottom: 30upx;
	}

	.post_reply_cell_content {
		display: flex;
		margin-top: 1upx;
		width: 100%;
		flex-direction: column;
	}

	.post_reply_cell_info_quote_content {
		font-size: 25upx;
		margin-top: 10upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 20upx;
		max-width: 690upx;
		padding: 20upx;
		border-radius: 8upx;
		overflow: hidden;
		word-break: break-word;
	}

	.post_reply_cell_content_text {
		font-size: 30upx;
		word-wrap: break-word;
		max-width: 690upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 20upx;
	}
	
	.post_reply_cell_content_link {
		color: #007AFF;
		text-decoration: underline;
		font-size: 30upx;
		word-wrap: break-word;
		max-width: 690upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 20upx;
	}



	.poll_info_content {
		display: flex;
		margin-top: 30upx;
		border-radius: 8upx;
		margin-left: 30upx;
		margin-right: 30upx;
		flex-direction: column;
	}

	.poll_info_title {
		margin-top: 20upx;
		margin-left: 20upx;
		font-size: 30upx;
		margin-bottom: 20upx;
	}

	.poll_info_cell {
		display: flex;
		margin-top: 20upx;
		flex-direction: row;
		align-items: center;
		height: 50upx;
	}

	.poll_info_cell_check {
		margin-left: 20upx;
	}

	.poll_info_cell_desc {
		margin-left: 20upx;
		font-size: 26upx;
	}

	.poll_info_cell_title {
		margin-top: 20upx;
		margin-left: 20upx;
		font-size: 26upx;
	}

	.poll_info_cell_content {
		margin-top: 10upx;
		margin-left: 20upx;
		margin-right: 20upx;
		height: 50upx;
		flex-direction: row;
	}

	.poll_info_cell_percent {
		display: flex;
		background-color: $uni-global-green-color;
		height: 100%;
	}

	.poll_info_subtitle {
		margin-top: 20upx;
		margin-left: 20upx;
		margin-right: 20upx;
		font-size: 25upx;
		text-align: right;
		margin-bottom: 30upx;
	}

	.unfavorite_button_content {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $uni-global-green-color;
		color: #fff;
		font-size: 30upx;
		height: 60upx;
		border-radius: 6upx;
		margin-right: 30upx;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.join_poll_button_content {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $uni-global-green-color;
		color: #fff;
		font-size: 30upx;
		height: 60upx;
		border-radius: 6upx;
		margin-right: 30upx;
		margin-left: 30upx;
		padding-left: 30upx;
		padding-right: 30upx;
		margin-top: 50upx;
	}

	.more_button_content {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30upx;
		height: 60upx;
		border-radius: 6upx;
		margin-right: 30upx;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.more_button_icon {
		width: 40upx;
		height: 40upx;
	}

	.favorite_button_content {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #aaaaaa;
		color: #fff;
		font-size: 30upx;
		height: 60upx;
		border-radius: 6upx;
		margin-right: 30upx;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.jinghua_img {
		width: 140upx;
		margin-top: 30upx;
		min-width: 140upx;
		margin-right: 30upx;
	}

	.zan_list_content {
		display: flex;
		flex-direction: row;
		margin-right: 30upx;
		margin-left: 20upx;
		margin-top: 30upx;
	}

	.zan_avatar {
		width: 60upx;
		min-width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-left: 10upx;
		margin-top: 20upx;
	}
	
	.reply_super_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.reply_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 20upx;
		border-radius: 8upx;
		height: 60upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 30upx;
		margin-right: 30upx;
		color: #aaaaaa;
		font-size: 26upx;
		flex-grow: 1;
	}
</style>

<script>
	import http from "../../utils/http.js"
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				isOnlyAuthor: false,
				isOrder: false,
				topicId: "",
				post: null,
				items: [],
				page: 1,
				selectPoll: null
			}
		},
		onLoad(options) {
			this.topicId = options.topicId ? options.topicId : "";
		},
		onShow() {
			if (this.post == null) {
				let that = this
				uni.getStorage({
					key: 'uni_user_data',
					success: function(res) {
						that.loadData();
					},
					fail: function() {
						uni.navigateTo({
							url: "../login/login"
						})
					}
				});
			}

		},
		onPullDownRefresh() {
			this.loadData();
		},
		onReachBottom() {
			this.loadMoreData()
		},
		onShareAppMessage() {
			return {
				title: this.post.title,
			}
		},
		onNavigationBarButtonTap() {
			var that = this;
			uni.showActionSheet({
				itemList: [this.isOnlyAuthor ? "查看全部" : "只看楼主", this.isOrder ? "顺序查看" : "倒序查看"],
				success: function(res) {
					if (res.tapIndex == 0) {
						that.isOnlyAuthor = !that.isOnlyAuthor;
						that.loadData();
					} else if (res.tapIndex == 1) {
						that.isOrder = !that.isOrder;
						that.loadData();
					}
				}
			})
		},
		methods: {
			loadData() {
				var that = this;
				http.request("forum/postlist", {
					order: this.isOrder ? 1 : 0,
					authorId: this.isOnlyAuthor ? this.post.user_id : 0,
					page: 1,
					pageSize: 50,
					topicId: this.topicId
				}, {
					success: function(data) {

						console.log(data)
						uni.stopPullDownRefresh();
						data.topic.content.map(function(item) {
							if (item.type == 0) {
								var reg = new RegExp('\n', "g")
								item.infor = item.infor.replace(reg, '<br/>');
								const emojRegex =
									/(\[mobcent_phiz=(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]+\])/g;
								item.infor = item.infor.replace(emojRegex, (emoj) => {
									emoj = emoj.replace("[mobcent_phiz=", "")
									emoj = emoj.substr(0, emoj.length - 1)
									return `<img src="${emoj}" width="40"/>`;
								})
							}

							return item
						})
						that.post = data.topic;
						that.post.showTime = util.dateStringFromTimestamp(that.post.create_date);
						that.post.board_id = data.board_id;
						if (that.post.poll_info) {
							that.post.poll_info.poll_item_list.map(function(item) {
								item.percent_css = item.total_num * 100.0 / that.post.poll_info
									.voters + "%";
							})
						}
						that.items = data.list.map(function(item) {
							item.showTime = util.dateStringFromTimestamp(item.posts_date);
							item.reply_content.map(function(reply) {
								if (reply.type == 0) {
									var reg = new RegExp('\n', "g")
									reply.infor = reply.infor.replace(reg, '<br/>');

									const emojRegex =
										/(\[mobcent_phiz=(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]+\])/g;
									reply.infor = reply.infor.replace(emojRegex, (emoj) => {
										emoj = emoj.replace("[mobcent_phiz=", "")
										emoj = emoj.substr(0, emoj.length - 1)
										
										return `<img src="${emoj}" width="40"/>`;
									})
								}
								return reply
							})
							return item;
						});
						that.page = 2;
					},
					fail: function(msg) {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			loadMoreData() {
				var that = this;
				http.request("forum/postlist", {
					order: this.isOrder ? 1 : 0,
					authorId: this.isOnlyAuthor ? this.post.user_id : 0,
					page: this.page,
					pageSize: 50,
					topicId: this.topicId
				}, {
					success: function(data) {
						if (data.list.length == 0) {
							uni.showToast({
								title: "没有更多了",
								icon: "none"
							})
						} else {
							that.items = that.items.concat(data.list.map(function(item) {
								item.showTime = util.dateStringFromTimestamp(item.posts_date);
								item.reply_content.map(function(reply) {
									if (reply.type == 0) {
										const emojRegex =
											/(\[mobcent_phiz=(http|ftp|https)?:\/\/[^\s]+\])/g;
										reply.infor = reply.infor.replace(emojRegex, (
											emoj) => {
											emoj = emoj.replace("[mobcent_phiz=",
												"")
											emoj = emoj.substr(0, emoj.length - 1)
											return `<img src="${emoj}"/>`;
										})
									}
									return reply
								})
								return item;
							}));
							that.page++;
						}

					},
					fail: function(msg) {
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			moreTap() {
				var that = this;
				uni.showActionSheet({
					itemList: [this.isOnlyAuthor ? "查看全部" : "只看楼主", this.isOrder ? "顺序查看" : "倒序查看"],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.isOnlyAuthor = !that.isOnlyAuthor;
							that.loadData();
						} else if (res.tapIndex == 1) {
							that.isOrder = !that.isOrder;
							that.loadData();
						}
					}
				})
			},
			linkTap(urlString){
				if(urlString.startsWith("https://bbs.uestc.edu.cn") || urlString.startsWith("http://bbs.uestc.edu.cn")){
					let tid = util.getQueryString(urlString,"tid")
					
					let mod = util.getQueryString(urlString,"mod")
					if(tid != null){
						this.topicId = tid
						this.selectPoll = null
						this.selectReply = null
						uni.pageScrollTo({
						    scrollTop: 0, 
						})
						this.loadData()
					}else if(mod == "space"){
						let uid = util.getQueryString(urlString,"uid")
						uni.navigateTo({
							url:"../other-user/other-user?uid=" + uid
						})
					}
					
				}else{
					uni.setClipboardData({
						data:urlString
					})
					uni.showToast({
						title:"复制成功",
						icon:"none"
					})
				}
			},
			selectPollTap(poll) {
				this.selectPoll = poll
			},
			joinPollTap() {
				if (this.selectPoll == null) {
					return;
				}
				var that = this;
				http.request("forum/vote", {
					options: this.selectPoll.poll_item_id,
					tid: this.post.topic_id
				}, {
					success: function(data) {
						that.loadData()
					},
					fail: function(msg) {
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			replyTap() {
				uni.navigateTo({
					url: "../forun-post-write/forun-post-write?rName=" + this.post.user_nick_name +"&tid="+this.post.topic_id
				})
			},
			replyCellTap(item) {
				uni.navigateTo({
					url: "../forun-post-write/forun-post-write?rName=" + item.reply_name + "&rid=" + item
						.reply_posts_id+"&tid="+this.post.topic_id
				})
			},
			blured() {
				if (this.replyText.length == 0) {
					this.placeholder = "点击回复";
					this.selectReply = null;
				}
				this.focus = false;
			},
			replyInput(value) {
				this.replyText = value;
			},
			avatarTap() {
				uni.navigateTo({
					url: "/pages/other-user/other-user?uid=" + this.post.user_id
				})
			},
			replyAvatarTap(e) {
				var item = e.currentTarget.dataset.item;
				uni.navigateTo({
					url: "/pages/other-user/other-user?uid=" + item.reply_id
				})
			},
			imageTap(e) {
				var item = e.currentTarget.dataset.item;
				uni.previewImage({
					urls: [item.infor]
				})
			},
			favoriteButtonTap() {
				var action = "favorite";
				if (this.post.is_favor) {
					action = "delfavorite";
				}
				var that = this;
				http.request("user/userfavorite", {
					action: action,
					idType: "tid",
					id: this.post.topic_id
				}, {
					success: function(data) {
						that.post.is_favor = !that.post.is_favor;
					},
					fail: function(msg) {
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>
